﻿@inherits WebViewPage<idseefeld.com.imagecropper.ImageCropperV5Model>

@using System.Web.Helpers;
@using System.Web.Mvc;
@using System.Web.Mvc.Ajax;
@using System.Web.Mvc.Html;
@using System.Web.Routing;
@using System.Web.WebPages;
@using Microsoft.Web.Mvc;
@using ClientDependency.Core;
@using ClientDependency.Core.Mvc;

@using Umbraco.Framework;
@using Umbraco.Cms.Web;
@using Umbraco.Cms.Web.Trees;
@using Umbraco.Cms.Web.Editors;

@using idseefeld.com.imagecropper;

@{
	var uniqueID = Guid.NewGuid().ToString();
	var pickerID = "cropper-" + uniqueID;
	
}

@{ 
	Html
		.RequiresJsResource(typeof(ImageCropperV5), "idseefeld.com.imagecropper.Resources.jquery.Jcrop.min.js")
		.RequiresJsResource(typeof(ImageCropperV5), "idseefeld.com.imagecropper.Resources.cropper.js")
		.RequiresCssResource(typeof(ImageCropperV5), "idseefeld.com.imagecropper.Resources.jquery.Jcrop.min.css")
		.RequiresCssResource(typeof(ImageCropperV5), "idseefeld.com.imagecropper.Resources.cropper.css");
}

<!-- cropper  Start -->
<div id="@pickerID">
@if (String.IsNullOrEmpty(Model.CropImageSrc))
{
	<p>At first you have to upload and publish an image ...</p>
}
else
{
	@Html.HiddenFor(x => Model.CropWidth)
	@Html.HiddenFor(x => Model.CropHeight)
	@Html.HiddenFor(x => Model.CropX)
	@Html.HiddenFor(x => Model.CropY)
	<div class="cropOriginal" style="width:@(Model.ImageWidth)px">
		<img src="@Model.CropImageSrc" class="target" alt="original" width="@Model.ImageWidth" height="@Model.ImageHeight" />
	</div>
	<div class="previewContainer" data-constraint="@Model.AspectRatio" data-width="@Model.PreviewWidth" data-height="@Model.PreviewHeight"
		data-position="@Model.Position" style="overflow: hidden;@Model.PreviewStyle">
		<img src="@Model.CropImageSrc" alt="Preview" class="jcrop-preview" style="display: none" />
	</div>
	<div class="cropInfoContainer">
		<strong>@Model.CropName</strong><br />
		<div class="cropInfo">
			&nbsp;
			<br />
			&nbsp;
		</div>
	</div>
	<script type="text/javascript">
	
		if (debugImageCropper == undefined) {
			var debugImageCropper = @Model.JavascriptDebug;
		}
		(function ($) {       
			$(document).ready(function () {
				var theCropper = new Cropper(
					"#@pickerID",
					"#@Html.IdFor(x => Model.CropX)",
					"#@Html.IdFor(x => Model.CropY)",
					"#@Html.IdFor(x => Model.CropWidth)",
					"#@Html.IdFor(x => Model.CropHeight)"
					);
				theCropper.initCropper();
			});
		})(jQuery);
		
	</script>
}
</div>
<!-- cropper END-->